<template>
  <div class="formbox">
    <el-form label-width="120px" :rules="rules" :model="form">
      <el-form-item label="品牌名称:" prop="name">
        <el-input widtn="100px" v-model="form.name" />
      </el-form-item>
      <el-form-item label="品牌首字母:" prop="firstLetter">
        <el-input v-model="form.firstLetter" />
      </el-form-item>
      <el-form-item label="品牌LOGO:" prop="logo">
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          action="http://127.0.0.1:5173/api/minio/upload"
          list-type="picture"
          :on-exceed="handleExceed"
          :on-preview="handlePreview"
          :on-success="handleSuccess"
        >
          <template #trigger>
            <el-button type="primary" @click="submitUpload">点击上传</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">只能上传jpg/png文件,且不超过100kb</div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="品牌专区大图:">
        <el-upload
          ref="uploadRef"
          class="upload-demo"
          action="http://127.0.0.1:5173/api/minio/upload"
          :auto-upload="false"
          v-model="form.bigPic"
        >
          <template #trigger>
            <el-button type="primary">点击上传</el-button>
          </template>
          <template #tip>
            <div class="el-upload__tip">只能上传jpg/png文件,且不超过100kb</div>
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="品牌故事:">
        <el-input v-model="form.brandStory" />
      </el-form-item>
      <el-form-item label="排序:" prop="sort">
        <el-input v-model="form.sort" />
      </el-form-item>
      <el-form-item label="是否显示:">
        <el-radio-group v-model="form.factoryStatus" class="ml-4">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="品牌制造商:">
        <el-radio-group v-model="form.showStatus" class="ml-4">
          <el-radio :label="1" size="large">是</el-radio>
          <el-radio :label="0" size="large">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="Submitbrand">提交</el-button>
        <el-button @click="resetremoce">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { BrandCreateApi, brandEditApi,brandUpdateEditApi } from "./api/api";
import { reactive, ref } from "vue";
import type { FormInstance } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import type { UploadInstance, UploadProps, UploadRawFile } from "element-plus";
import { genFileId } from "element-plus";
const router = useRouter();
const route = useRoute();
const rules = reactive({
  name: [{ required: true, message: "请输入名称", trigger: "blur" }],
  firstLetter: [
    { required: true, message: "请输入品牌首字母", trigger: "blur" },
  ],
  sort: [{ required: true, message: "排序必须为数字", trigger: "blur" }],
  logo: [{ required: true, message: "请选择上传的图片", trigger: "blur" }],
});
const form = reactive<BrandCreateidModel>({
  name: "",
  bigPic: "",
  brandStory: "",
  factoryStatus: 0,
  firstLetter: "",
  logo: "",
  showStatus: 0,
  sort: 0,
});

// 编辑
const id = route.query.id;
if (id) {
  brandEditApi(parseInt(id as string)).then((res) => {
    if (res.code === 200) {
      Object.assign(form, res.data);
    }
  });
}

const beandEdit =() => {
  brandUpdateEditApi(parseInt(id as string),form).then((res)=>{
    if(res.code === 200){
      ElMessage.success("修改成功");
      router.push("/pms/brand");
    }
  })
} 
// 增加
const addbrand = () => {
  BrandCreateApi(form).then((res) => {
    if (res.code === 200) {
      ElMessage.success("添加成功");
      router.push("/pms/brand");
      // 清空表单
      formRef.value?.resetFields();
    } else {
      ElMessage.error("添加失败");
    }
  });
};
// 提交
const Submitbrand = () => {

  ElMessageBox.confirm("是否提交信息", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {

      if (id) {
        beandEdit();
      } else {
        addbrand();
      }
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "Delete canceled",
      });
    });
};
// 重置
const formRef = ref<FormInstance>();
const resetremoce = () => {
  console.log(2324245);

  formRef.value?.resetFields();
};
// 图片上传
const uploadRef = ref<UploadInstance>();
const handleExceed: UploadProps["onExceed"] = (files) => {
  uploadRef.value!.clearFiles();
  const file = files[0] as UploadRawFile;
  file.uid = genFileId();
  uploadRef.value!.handleStart(file);
};

const submitUpload = () => {
  uploadRef.value!.submit();
  console.log("122",uploadRef.value!.submit());
};
const handleSuccess: UploadProps["onSuccess"] = (response: any, uploadFile) => {
  form.logo = uploadFile.url as string


};
const handlePreview: UploadProps["onPreview"] = (uploadFile) => {
  console.log("222","previ", uploadFile);
};
</script>
<style lang="less" scoped>
.formbox {
  width: 600px;
  margin: 0 auto;
  border: 1px solid #eee;
  padding-top: 30px;
  :deep(.el-form-item) {
    padding-top: 20px;
  }
  :deep(.el-input) {
    width: 400px;
  }
  :deep(.upload-demo) {
    width: 50px;
  }
  .el-upload__tip {
    width: 300px;
  }
}
</style>
